<template>
  <div>
    <div class="cardSchool">
      <!-- 倒车入库 -->
      <div class="vs-title">
        <div>
          <p>{{ video.title }}</p>
          <div>{{ video.djl }}人观看</div>
        </div>
        <!-- <div>
          <img src="../../assets/images/16.png" alt />
          <div>14.1W</div>
        </div> -->
      </div>
      <div class="practiceDriving">
        <p>预约练车</p>
        <div @click="href('/TaxiHailing')">去预约</div>
      </div>
      <!-- 课程目录 -->
      <!-- 课程目录 -->
      <div class="course-catalogue">
        <div class="coures-catalogue border-bottom">
          <div class="cs-catalog">
            <div>
              <img src="../../assets/images/59 (1).png" alt />
              <p>课程目录</p>
            </div>
            <div>
              <p>更多</p>
              <img src="../../assets/images/05.png" alt />
            </div>
          </div>

          <div class="vc-catalogue">
            <div class="vc-scroll">
              <div v-for="(item, index) in lists" :key="index">
                <img :src="item.img" alt />
                <div>{{ item.play }}</div>
                <p>{{ item.time }}</p>
                <p>{{ item.title }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 驾考秘籍 -->
      <div class="course-catalogue">
        <div class="coures-catalogue">
          <div class="cs-catalog">
            <div>
              <img src="../../assets/images/59 (2).png" alt />
              <p>驾考秘籍</p>
            </div>
            <div @click="href('/Esoterica')">
              <p>更多</p>
              <img src="../../assets/images/05.png" alt />
            </div>
          </div>
          <!-- 内容 -->
          <div
            class="vc-content border-bottom"
            v-for="(item, index) in content"
            :key="index"
            @click="href('/SecretDetails')"
          >
            <p class="vc-title">{{ item.title }}</p>
            <div>
              <p>{{ item.time }}</p>
              <p>已有{{ item.reads }}阅读</p>
            </div>
          </div>
        </div>
      </div>
      <!-- end -->
      <!-- 讨论区 -->
      <div class="course-catalogue">
        <div class="coures-catalogue">
          <div class="cs-catalog">
            <div>
              <img src="../../assets/images/59 (3).png" alt />
              <p>讨论区</p>
            </div>
          </div>
          <div class="cs-forum" v-for="(item, index) in forum" :key="index">
            <img :src="item.img" alt />
            <div>
              <p>{{ item.name }}</p>
              <div>{{ item.content }}</div>
            </div>
            <div>
              <img src="../../assets/images/16.png" alt />
              <p>{{ item.reads }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="cs-input">
      <input type="text" placeholder="有什么问题，直接抛给我" />
    </div> -->
  </div>
</template>

<script>
import { VideoDetails } from "../../assets/js/api/exam";
export default {
  name: "VideoCourse",
  data() {
    return {
      video: "",
      lists: [
        {
          img: require("../../assets/images/65.jpg"),
          play: "播放中",
          time: "10:40",
          title: "坡路定点停车与起步"
        },
        {
          img: require("../../assets/images/65.jpg"),
          play: "播放中",
          time: "10:40",
          title: "侧方停车"
        },
        {
          img: require("../../assets/images/65.jpg"),
          play: "播放中",
          time: "10:40",
          title: "直角转弯"
        },
        {
          img: require("../../assets/images/65.jpg"),
          play: "播放中",
          time: "10:40",
          title: "曲线行驶"
        },
        {
          img: require("../../assets/images/65.jpg"),
          play: "播放中",
          time: "10:40",
          title: "停车取卡"
        },
        {
          img: require("../../assets/images/65.jpg"),
          play: "播放中",
          time: "10:40",
          title: "紧急停车 "
        }
      ],
      content: [
        {
          title: "掌握这两点，轻松搞定科二90秒内侧方停车",
          time: "2020年06月13日",
          reads: "25635"
        },
        {
          title: "为什么提艾塔娜倒车入库，却越来越差？原来是没注意这3个关键件",
          time: "2020年06月13日",
          reads: "25635"
        },
        {
          title: "资深教练总结：科目二挂科的3大原因!句句在理！",
          time: "2020年06月13日",
          reads: "25635"
        }
      ],
      // 讨论区
      forum: [
        {
          img: require("../../assets/images/08.png"),
          name: "一点通3121",
          content: "29号考科一，祝我顺利通过吧",
          reads: "899"
        },
        {
          img: require("../../assets/images/08.png"),
          name: "一点通3121",
          content: "29号考科一，祝我顺利通过吧",
          reads: "899"
        },
        {
          img: require("../../assets/images/10.png"),
          name: "一点通4073",
          content: "紧张不要不要的，还好终于过了",
          reads: "899"
        }
      ]
    };
  },
  created() {
    VideoDetails("2", this.$route.params.id).then(res => {
      // console.log(res);
      this.video = res.data.videoInfo;
    });
  },
  methods: {
    href(url) {
      this.$router.push({ path: url });
    }
  }
};
</script>

<style>
</style>